<script setup lang="ts">
import ROSLIB from "roslib";
// import { Ros3dViewer, Ros3dGrid, Ros3dAxes, Ros3dLaserScan } from "vue-ros3djs";
import * as ROS3D from "ros3d";
import { onMounted } from "vue";
function init() {
  // Connect to ROS.
  const ros = new ROSLIB.Ros({
    url: "ws://localhost:9090"
  });

  // Create the main viewer.
  const viewer = new ROS3D.Viewer({
    divID: "urdf",
    width: 800,
    height: 600,
    antialias: true
  });

  // Add a grid.
  viewer.addObject(new ROS3D.Grid());
  // Setup a client to listen to TFs.
  const tfClient = new ROSLIB.TFClient({
    ros: ros,
    angularThres: 0.01,
    transThres: 0.01,
    rate: 10.0
  });

  // Setup the URDF client.
  const urdfClient = new ROS3D.UrdfClient({
    ros: ros,
    tfClient: tfClient,
    // path: "https://raw.githubusercontent.com/PR2/pr2_common/melodic-devel/",
    path: "turtlebot3_description",
    rootObject: viewer.scene
  });
  const LaserScan = new ROS3D.LaserScan({
    ros: ros,
    tfClient: tfClient,
    rootObject: viewer.scene
  });
}
onMounted(() => {
  init();
});
</script>
<template>
  <div id="urdf" />
</template>

<style scoped></style>
